<template>
  <div class="car">
    <!-- 顶栏 -->
    <div class="top">
      <ul class="nav">
        <li>
          红魔
          <div class="header-content">
            <div class="tab">
              <ul class="tab-control"></ul>
              <div class="tab-card">
                <div class="tab-content show">
                  <div class="shop">
                    <img class="shop-img" src="/img/phone1.png" alt="" />
                    <h2>红魔8Pro+</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/phone2.png" alt="" />
                    <h2>红魔8Pro</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/phone3.png" alt="" />
                    <h2>红魔7S Pro</h2>
                    <h3></h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/phone4.png" alt="" />
                    <h2>红魔7S</h2>
                    <h3></h3>
                  </div>
                  <div class="more-info">查看更多</div>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li>
          努比亚
          <div class="header-content">
            <div class="tab">
              <ul class="tab-control"></ul>
              <div class="tab-card">
                <div class="tab-content show">
                  <div class="shop">
                    <img class="shop-img" src="/img/phone5.png" alt="" />
                    <h2>nubia Z50</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/phone6.png" alt="" />
                    <h2>nubia Z30Pro</h2>
                    <h3></h3>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li>
          <span @mouseenter="flagIndex = 1">智能生态</span>
          <div class="header-content">
            <div class="tab">
              <ul class="tab-control">
                <li @mouseenter="flagIndex = 1">新品</li>
                <li @mouseenter="flagIndex = 2">电竞设备</li>
                <li @mouseenter="flagIndex = 3">手机充电</li>
                <li @mouseenter="flagIndex = 4">智能穿戴</li>
                <li @mouseenter="flagIndex = 5">手机壳膜</li>
              </ul>
              <div class="tab-card toggle-flag">
                <div class="tab-content show" v-show="flagIndex == 1">
                  <div class="shop">
                    <img class="shop-img" src="/img/new1.png" alt="" />
                    <h2>中兴Z4 pro 4K机顶盒</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/new2.png" alt="" />
                    <h2>红魔影刃手柄</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/new3.png" alt="" />
                    <h2>红魔游戏键盘</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/new4.png" alt="" />
                    <h2>红魔鼠标垫</h2>
                    <h3>新品</h3>
                  </div>
                  <!-- <div class="more-info">查看更多</div> -->
                </div>
                <div class="tab-content show" v-show="flagIndex == 2">
                  <div class="shop">
                    <img class="shop-img" src="/img/dj1.png" alt="" />
                    <h2>红魔影刃手柄</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/dj2.png" alt="" />
                    <h2>红魔游戏键盘</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/dj3.png" alt="" />
                    <h2>红魔鼠标垫</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/dj4.png" alt="" />
                    <h2>红魔电竞显示屏</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="more-info">查看更多</div>
                </div>
                <div class="tab-content show" v-show="flagIndex == 3">
                  <div class="shop">
                    <img class="shop-img" src="/img/sj1.png" alt="" />
                    <h2>C to L MFI 大白硅胶数据线</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/sj2.png" alt="" />
                    <h2>大白20W单口充电器</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/sj3.png" alt="" />
                    <h2>100W四口Gan3 Pro套装</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/sj4.png" alt="" />
                    <h2>65W三口Gan3 Pro套装</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="more-info">查看更多</div>
                </div>
                <div class="tab-content show" v-show="flagIndex == 4">
                  <div class="shop">
                    <img class="shop-img" src="/img/zn1.png" alt="" />
                    <h2>努比亚新音C1蓝牙耳机</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/zn2.png" alt="" />
                    <h2>红魔手表-活力版</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/zn3.png" alt="" />
                    <h2>努比亚真无线蓝牙耳机T1</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/zn4.png" alt="" />
                    <h2>红魔手表</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="more-info">查看更多</div>
                </div>
                <div class="tab-content show" v-show="flagIndex == 5">
                  <div class="shop">
                    <img class="shop-img" src="/img/km1.png" alt="" />
                    <h2>红魔8Pro电竞导热保护壳</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/km2.png" alt="" />
                    <h2>红魔8系电竞钢化膜</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/km3.png" alt="" />
                    <h2>红魔7S电竞导热保护壳</h2>
                    <h3></h3>
                  </div>
                  <!-- <div class="more-info">查看更多</div> -->
                </div>
              </div>
            </div>
          </div>
        </li>
        <li><h1 class="logo"></h1></li>
        <li>服务</li>
        <li>品牌</li>
        <li>社区</li>
      </ul>
      <ul class="user-block">
        <li>
          <a href="javascript:void(0)"><i class="user"></i></a>
          <div class="toggle-user">
            <ul>
              <li class="border-line" v-if="!iflag">
                <router-link class="login" to="/Login">立即登录</router-link>
                <span class="reg-des"
                  >无账号？<a class="register" href="#Register"
                    >立即注册</a
                  ></span
                >
              </li>
              <li class="border-line" v-else>
                <a class="unlogin" href="javascript:void(0)" @click="quituser"
                  >退出登录</a
                >
              </li>
              <li class="common-li border-line">
                <a href="javascript:void(0)">个人中心</a>
              </li>
              <li class="common-li border-line">
                <a href="javascript:void(0)">我的订单</a>
              </li>
              <li class="common-li border-line">
                <a href="javascript:void(0)">我的优惠券</a>
              </li>
              <li class="common-li border-line">
                <a href="javascript:void(0)">我的收藏</a>
              </li>
              <li class="common-li border-line">
                <a href="javascript:void(0)">我的预约</a>
              </li>
              <li class="common-li">
                <a href="javascript:void(0)">收获地址</a>
              </li>
            </ul>
          </div>
        </li>
        <li>
          <a class="car-car" href="javascript:void(0)"
            ><i class="shop-car"></i
          ></a>
        </li>
        <li>
          <a href="javascript:void(0)"><i class="search"></i></a>
        </li>
      </ul>
    </div>

    <!-- 内容块 -->
    <div class="empty-car" v-if="!shoplist.length">
      <router-link to="/Home" class="go-to-home"></router-link>
    </div>
    <div class="buy-car" v-else>
      <img class="car-now main" src="/img/car-now.png" alt="" />
      <div class="car-show main">
        <p>商品清单</p>
        <!-- 商品列表渲染 -->
        <ul class="show-car-car">
          <li class="car-1" v-for="(item, index) in shoplist" :key="item.id">
            <img
              class="car-img"
              :src="'/img' + item['shop_color_img']"
              alt=""
            />
            <span class="title"
              >{{ item['shop_name'] }}（{{ item['shop_color'] }}）</span
            >
            <span class="price">￥{{ item['shop_price'] }}</span>
            <div class="jisuan">
              <a class="jian" href="javascript:void(0)" @click="jian(index)"
                >-</a
              >
              <span class="my-num">{{ item['shop_num'] }}</span>
              <a class="jia" href="javascript:void(0)" @click="jia(index)">+</a>
            </div>
            <span class="sum-price"
              >￥{{ item['shop_num'] * item['shop_price'] }}</span
            >
            <a
              class="delete"
              href="javascript:void(0)"
              @click="del(item.id, index)"
              >X</a
            >
          </li>
        </ul>
        <p class="choose-num">
          已选择<span class="num2">{{ sumnumber }}</span
          >件商品
        </p>
        <div class="sum-block">
          <div class="sum-1">
            <span>合计（不含运费）</span
            ><span class="sum-2">￥{{ sumprice }}</span>
          </div>
          <div class="sum-3">
            <a href="#/home" class="jixu-buy">继续购物</a>
            <a href="javascript:void(0)" class="like-buy">去结算</a>
          </div>
        </div>
      </div>
    </div>

    <!-- 底栏区域 -->
    <div class="foot">
      <div class="foot-con main">
        <img src="/img/foot.png" alt="" />
        <div class="foot-line2">
          <div class="dl-block">
            <dl>
              <dt>关于我们</dt>
              <dd>关于红魔</dd>
              <dd>联系我们</dd>
              <dd>加入我们</dd>
              <dd>商家入驻</dd>
              <dd>合作招商</dd>
            </dl>
            <dl>
              <dt>手机</dt>
              <dd>红魔8Pro+</dd>
              <dd>红魔8Pro</dd>
              <dd>红魔7S Pro</dd>
              <dd>红魔7S</dd>
              <dd>红魔7Pro</dd>
              <dd>红魔7</dd>
              <dd>红魔6R</dd>
              <dd>红魔6</dd>
            </dl>
            <dl>
              <dt>配件</dt>
              <dd>手机充电</dd>
              <dd>电竞配件</dd>
              <dd>智能穿戴</dd>
              <dd>手机壳膜</dd>
            </dl>
            <dl>
              <dt>热门活动</dt>
              <dd>必购码通道</dd>
              <dd>以旧换新</dd>
              <dd>全民分销</dd>
            </dl>
            <dl>
              <dt>服务支持</dt>
              <dd>售后服务</dd>
              <dd>售后网点</dd>
              <dd>软件下载</dd>
              <dd>产品安全</dd>
              <dd>云服务</dd>
              <dd>红魔投屏</dd>
              <dd>红魔云驱动</dd>
              <dd>售后隐私政策</dd>
            </dl>
          </div>
          <img src="/img/tl.png" alt="" />
        </div>
        <img src="/img/foot-2.png" alt="" />
      </div>
    </div>
    <div class="tip-login" v-show="tip_flag">
      <a class="xx" href="javascript:void(0)" @click="tip_flag = false">x</a
      ><span class="tip-message">{{ tipMessage }}</span>
    </div>
  </div>
</template>

<script>
import { showcar, delecar, updatecar } from '../api/car'
export default {
  data() {
    return {
      flagIndex: 0,
      //判断登录
      iflag: 0,
      //提示框
      tipMessage: '',
      tip_flag: false,
      userid: '',
      //渲染购物车
      shoplist: []
    }
  },
  methods: {
    quituser() {
      document.cookie = `id=undefined;path =/;`
      this.iflag = 0
      this.tipMessage = '退出账号成功！'
      this.tip_flag = true
      setTimeout(() => {
        this.tip_flag = false
        this.$router.push('/Login')
      }, 2000)
    },
    // 删除
    async del(id, index) {
      this.shoplist.splice(index, 1)
      console.log('删除')
      await delecar(id)
    },
    //小按钮减
    async jian(index) {
      console.log(this.shoplist[index]['shop_num'])
      if (this.shoplist[index]['shop_num'] <= 1) {
        this.shoplist[index]['shop_num'] = 1
      } else {
        this.shoplist[index]['shop_num']--
        // console.log(oneshop)
        await updatecar({
          carId: this.shoplist[index].id,
          num: this.shoplist[index]['shop_num']
        })
      }
    },
    //小按钮加
    async jia(index) {
      this.shoplist[index]['shop_num']++
      await updatecar({
        carId: this.shoplist[index].id,
        num: this.shoplist[index]['shop_num']
      })
    }
  },
  computed: {
    sumnumber() {
      let sum = 0
      this.shoplist.forEach((v) => {
        sum += v['shop_num']
      })
      return sum
    },
    sumprice() {
      let sump = 0
      this.shoplist.forEach((v) => {
        sump += v['shop_num'] * v['shop_price']
      })
      return sump
    }
  },
  async mounted() {
    let cookies = document.cookie.split(';')
    cookies.forEach((v) => {
      if (v.split('=')[0].trim() == 'id' && v.split('=')[1] != 'undefined') {
        this.iflag = 1
        this.userid = v.split('=')[1]
      } else {
        this.$router.push('/Login')
      }
    })
    let {
      data: { data }
    } = await showcar(this.userid)
    this.shoplist = data
    console.log(data)
  }
}
</script>

<style lang="less" scoped>
body {
  min-width: 1202px;
}
/* 用于底部的版心 */
.main {
  width: 1202px;
  margin: 0 auto;
}

/* 顶栏 */
.top {
  height: 60px;
  background: #fff;
  position: relative;
}
.nav {
  width: 687px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
}
.nav > li {
  float: left;
  padding-left: 33px;
  padding-right: 33px;
  color: #333333;
  font-weight: bold;
  font-size: 15px;
}
/* .nav>li:last-child{
    margin-right: 16px;
}
.nav>li:nth-child(3),.nav>li:nth-child(4){
    margin-right: 10px;
} */
.nav > li:nth-child(4) {
  padding-right: 0px;
  padding-left: 0px;
}
.nav > li:hover {
  color: #999;
}
.nav > li > .header-content {
  position: absolute;
  background-color: #fff;
  height: 0px;
  width: 100%;
  top: 60px;
  left: 0px;
  overflow: hidden;
  z-index: 999;
  transition: height 0.25s ease-in-out;
}
.nav > li:hover .header-content {
  height: 200px;
}
.logo {
  width: 66px;
  height: 60px;
  background: url(/img/logo.png) no-repeat center/56%;
}
.tab {
  width: 1200px;
  height: 200px;
  margin: 0 auto;
  display: flex;
  justify-content: left;
}
.tab-control {
  width: 68px;
  margin-left: 75px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.tab-card {
  margin-left: 9%;
}
.tab-content {
  display: flex;
  /* margin-left: 9%; */
  align-items: center;
  height: 200px;
  display: none;
}
.tab-content .shop {
  height: 152px;
}
.tab-content .shop-img {
  width: 100px;
  margin-left: 34px;
  margin-right: 34px;
}
.tab-content .shop > h2 {
  font-size: 12px;
  font-weight: 500;
  color: #333333;
  margin-top: 10px;
  line-height: 1.72222;
  text-align: center;
}
.tab-content .shop > h3 {
  color: #e70012;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  line-height: 1.72222;
}
.tab-content .more-info {
  width: 100px;
  height: 36px;
  line-height: 36px;
  border: 1px solid #ea340d;
  color: #ea340d;
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  transition: all 0.25s;
}
.tab-content .more-info:hover {
  background-color: #ea340d;
  color: #fff;
}

.tab-control > li {
  line-height: 35px;
  height: 35px;
  text-align: center;
  color: #333333;
  font-size: 12px;
  font-weight: 400;
  transition: all 0.25s;
}
.tab-control > li:hover {
  background-color: #eee;
}

.tab-control > li:nth-child(1) {
  margin-top: 10px;
}
.tab-control > li:last-child {
  margin-bottom: 10px;
}
.show {
  display: flex;
}
.user {
  display: inline-block;
  width: 35px;
  height: 60px;
  background: url(/img/admin2.png) no-repeat center/22px 22px;
}
.shop-car {
  display: inline-block;
  width: 35px;
  height: 60px;
  background: url(/img/shop-car2.png) no-repeat center/22px 22px;
}
.search {
  width: 35px;
  height: 60px;
  display: inline-block;
  background: url(/img/search2.png) no-repeat center/22px 22px;
}
.user-block {
  width: 144px;
  height: 60px;
  display: flex;
  justify-content: space-evenly;
  position: absolute;
  right: 116px;
  top: 0px;
}
.toggle-user {
  position: absolute;
  top: 60px;
  right: -76px;
  background: #fff;
  width: 320px;
  height: 0px;
  padding: 0px;
  transition: 0.25s;
  overflow: hidden;
  box-shadow: 0 1px 2px 0 rgb(102 102 102 / 50%);
}
.user-block > li:nth-child(1):hover .toggle-user {
  height: 376px;
  padding: 20px;
  z-index: 999;
}
.toggle-user li:nth-child(1) {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
.login {
  width: 56px;
  height: 50px;
  line-height: 50px;
  color: #e8390c;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 5px;
}
.login:hover {
  color: #333;
}
.unlogin {
  width: 56px;
  height: 50px;
  line-height: 50px;
  color: #e8390c;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 5px;
}
.unlogin:hover {
  color: #333;
}
.login-none {
  display: none !important;
}
.reg-des {
  color: #999;
  display: inline-block;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
}
.register {
  color: rgb(80, 151, 223);
}
.common-li {
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  font-weight: 400;
}
.common-li a {
  color: #999;
}

.common-li:hover a {
  color: #333;
}
.border-line {
  border-bottom: 1px solid #eee;
}

/* 内容区 */
.empty-car {
  background: #f0f0f0 url(/img/empty-car.png) no-repeat center/520px;
  background-position: 468px 46px;
  width: 100%;
  height: 460px;
  position: relative;
}
.car-car-none {
  display: none;
}
.go-to-home {
  width: 162px;
  height: 48px;
  position: absolute;
  top: 179px;
  left: 550px;
}
.buy-car {
  width: 100%;
  padding-bottom: 50px;
  position: relative;
  background: #f0f0f0;
  padding-top: 30px;
}
.car-now {
  margin-bottom: 20px;
}
.car-show {
  background-color: white;
  padding: 45px;
  box-sizing: border-box;
  position: relative;
}
.car-img {
  width: 100px;
}
.car-1 {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  height: 160px;
  border-bottom: 1px solid #eee;
}
.price {
  color: #bbb;
}
.jisuan {
  display: flex;
  border: 1px solid #eee;
  height: 31px;
  line-height: 31px;
  text-align: center;
}
.jian {
  width: 30px;
  color: #333;
}
.my-num {
  width: 30px;
  color: #333;
}
.jia {
  width: 30px;
  color: #333;
}
.sum-price {
  font-size: 18px;
}
.choose-num {
  color: #aaa;
  margin-top: 50px;
}
.num2 {
  color: #444;
}
.sum-block {
  margin-top: 54px;
  margin-left: 762px;
  width: 355px;
  display: flex;
  flex-direction: column;
}
.sum-1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
  padding-bottom: 30px;
  color: #aaa;
}
.sum-2 {
  color: #ea340d;
  font-size: 30px;
}
.sum-3 {
  margin-top: 40px;
  display: flex;
}
.jixu-buy {
  margin-right: 10px;
  width: 240px;
  height: 55px;
  color: #333;
  border: 1px solid #333;
  border-radius: 4px;
  text-align: center;
  line-height: 55px;
}
.like-buy {
  width: 240px;
  height: 55px;
  background-color: #de634f;
  color: white;
  border-radius: 4px;
  text-align: center;
  line-height: 55px;
}

/* 底栏区域 */
.foot {
  /* margin-top: 97px; */
  width: 100%;
  height: 717px;
  background: #000000;
  color: #414143;
}
.foot-line2 {
  display: flex;
}
.dl-block {
  display: flex;
  justify-content: space-between;
  flex: 1;
}
.dl-block dt {
  color: #ffffff;
  font-size: 16px;
  margin-bottom: 20px;
}
.dl-block dd {
  font-size: 14px;
  margin-top: 11px;
  line-height: 21px;
  color: #a5a5a5;
}
.dl-block dd:hover {
  color: #fff;
}
/* 提示框 */
.tip-login {
  position: fixed;
  top: 50%;
  left: 50%;
  background-color: #e8380d;
  // width: 200px;
  padding: 0 60px;
  height: 120px;
  text-align: center;
  line-height: 120px;
  transform: translate(-50%, -50%);
  z-index: 999;
  // border: 1px solid #333;
  border-radius: 10px;
  font-size: 24px;
  color: white;
}
.xx {
  position: absolute;
  right: 3px;
  top: 3px;
  line-height: 10px;
}
.none {
  display: none;
}
</style>
